<template>
  <div id="test">
    <div class="test">
      <input type="file" name="img" id="file" ref="file" />
      <button @click="submit">提交</button>
      <button @click="downloadClick">下载</button>
      <a :href="`${RequireURL}/api/download`">下载</a>
      <a :href="thunderLink">迅雷下载</a>
      <button @click="rangeDownLoad">分段下载</button>
      {{ (tasksProcess[fileObj.relativePath] && tasksProcess[fileObj.relativePath].process) || 0 }}%
      <button @click="stopDownload">停止下载</button>
      <button @click="scrollPosition.smoothScrollTo( 1000, 10000 )">去往</button>
    </div>
    <div class="boxZhanwei" v-for="item in 100">{{ item * 100 }}px</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
//@ts-ignore
import { ElMessage } from "element-plus";
import { uploadImg } from "../api/upload";
import { thunderDownload, download } from "../api/download";
import { RequireURL } from "../util/const";
import { useDownloadStore } from "../store/index";
import { storeToRefs } from "pinia";
import { FileItf } from "@/interface";
import { ScrollPosition } from "@/util/scrollTo"
const formData = new FormData();
const file = ref<HTMLFormElement>();
const downloadStore = useDownloadStore();
const { tasksProcess } = storeToRefs(downloadStore);
// const progress = ref(0);

const scrollPosition = new ScrollPosition()

function submit() {
  for (const img of file.value!.files) {
    formData.append("img", img, img.name);
  }
  uploadImg(formData);
}

async function downloadClick() {
  download("/mp4/v0300fg10000ch91opjc77u1s39urahg.MP4");
}

const thunderLink = ref("");
onMounted(() => {
  thunderLink.value = thunderDownload();
});

let fileObj: FileItf = {
  isDir: false,
  duration: 101239,
  ext: ".MP4",
  fileName: "v0300fg10000ch91opjc77u1s39urahg.MP4",
  id: 46182,
  isFile: true,
  isImg: false,
  isVideo: true,
  parentId: 46175,
  path: "http://10.12.181.30:5009/static/mp4/v0300fg10000ch91opjc77u1s39urahg.MP4",
  relativePath: "/mp4/v0300fg10000ch91opjc77u1s39urahg.MP4",
  size: 8576879,
  thumbnailPath:
    "http://10.12.181.30:5009/static/screenshot/mp4/djAzMDBmZzEwMDAwY2g5MW9wamM3N3UxczM5dXJhaGc=.png",
};

// let onListener: OnListener = {
//   onProcess(current, total) {
//     // console.log(Math.floor( current/ total * 100 ));
//     progress.value = Math.floor((current / total) * 100);
//   },
//   onFailed(err) {
//     console.log("这里报错了", err);
//   },
//   onCanceled(blob) {
//     console.log("取消了");
//     console.log(blob);
//   },
// };
async function rangeDownLoad() {
  downloadStore.webWorkDownload(fileObj)
}

async function stopDownload() {
  // console.log(rangeD.StopDownload());
  downloadStore.stopWebWorkDownload(fileObj)
}





</script>
<style lang="scss">
.boxZhanwei {
  height: 100px;
  box-sizing: border-box;
  border-top: 1px solid #000;
}
</style>
